<template>
  <div>
     <!-- @close="onClose" -->
    <el-dialog
      v-bind="$attrs"
      v-on="$listeners"
      :title="titleInfo.text+titleInfo.pageTitle"
      :visible.sync="dialogFormVisible"
    >
      <el-form
        ref="dataForm"
        :model="formBase"
        :rules="rules"
        size="medium"
        label-width="120px"
        label-position="left"
      >
        <!-- 文章标题 -->
        <el-form-item label="文章标题" prop="title">
          <el-input
            v-model="formBase.title"
            placeholder="请输入单行文本文章标题"
            clearable
            :style="{ width: '100%' }"
          ></el-input>
        </el-form-item >
        <!-- 文章内容 -->
        <el-form-item label="文章内容" class="local-quill-editor" prop="articleBody">
          <quill-editor
            ref="myLQuillEditor"
            v-model="formBase.articleBody"
            :options="editorOption"
            class="editor"
            @blur="onEditorBlur"
            @focus="onEditorFocus"
            @change="onEditorChange"
            :style="{ height: '80%' }"
          >
          </quill-editor>
        </el-form-item>
        <!-- 视频地址 -->
        <el-form-item label="视频地址" prop="videoURL">
          <el-input
            v-model="formBase.videoURL"
            placeholder="请输入视频地址"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">

        <el-button @click="CloseDialogForm">取消</el-button>
        <el-button type="primary" @click="createData">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
//
import { update, add } from '@/api/hmmm/articles.js'
// 引入样式和quillEditor
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
// 工具栏配置项
const toolbarOptions = [
  // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
  ['bold', 'italic', 'underline', 'strike'],
  // 引用  代码块-----['blockquote', 'code-block']
  ['blockquote', 'code-block'],
  // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
  [{ list: 'ordered' }, { list: 'bullet' }],
  // 字体种类-----[{ font: [] }]
  [{ font: [] }],
  // 链接、图片、视频-----['link', 'image', 'video']
  ['image']
]
export default {
  name: 'ArticlesAdd',
  inheritAttrs: false,
  components: {
    quillEditor
  },
  props: {
    titleInfo: {
      type: Object,
      required: true
    },
    formBase: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      dialogFormVisible: false,
      content: '',
      editorOption: {
        modules: {
          toolbar: toolbarOptions
        },
        theme: 'snow',
        placeholder: '请输入正文'
        // Some Quill optiosn...
      },
      // {

      //   title: undefined,
      //   videoURL: undefined,
      //   articleBody: undefined
      // }
      formData: {},
      rules: {
        title: [{
          required: true,
          message: '请输入单行文本文章标题',
          trigger: 'blur'
        }],
        videoURL: [],
        articleBody: [{
          required: true,
          message: '请输入单行文本文章内容',
          trigger: 'blur'
        }]

      }
    }
  },
  computed: {
    // title () {
    //   return this.formData.id ? '修改文章' : '新增文章'
    // }
  },
  watch: {},
  created () {},
  mounted () {},
  methods: {
    // 数据回显
    // 弹层显示
    OpenDialogForm () {
      this.dialogFormVisible = true
    },
    //  关闭弹层
    CloseDialogForm () {
      this.dialogFormVisible = false
    },
    onClose () {
      this.close()
      // console.log(this.formData)
    },
    close () {
      // console.log(this.$options.data())
      // this.dialogFormVisible = false
      // this.$emit('update:visible', false)
      // this.$refs.dataForm.resetFields()
      // console.log(this.formBase)
    },
    // handelConfirm () {
    //   this.$refs.dataForm.validate(valid => {
    //     if (!valid) return
    //     this.close()
    //   })
    // },
    // 表单提交,新增数据
    createData () {
      this.$refs.dataForm.validate(async valid => {
        if (valid) {
          this.CloseDialogForm()
          const data = {
            ...this.formBase
          }
          if (this.formBase.id) {
            await update(data).then(() => {
              this.$emit('newDataes', this.formBase)
            })
          } else {
            await add(this.formBase).then(() => {
              this.$emit('newDataes', this.formBase)
            })
          }
        } else {
          this.$message.error('*号为必填项!')
        }
      })
    },
    // 失去焦点事件
    onEditorBlur (e) {
      // console.log('onEditorBlur: ', e)
    },
    // 获得焦点事件
    onEditorFocus (e) {
      // console.log('onEditorFocus: ', e)
    },
    // 内容改变事件
    onEditorChange (e) {
      // console.log('onEditorChange: ', e)
    }
  }
}

</script>
<style scoped lang="scss">
.editor {
  height: 200px;
}
</style>
